<template>
  <div class="article-item-container">
    <h2 class="article-title">
      <router-link :to="'/detail/'+article.id" class="to-detail">{{article.title}}</router-link>
    </h2>
    <div class="article-info">
      <div class="article-time"><i class="el-icon-date"></i>{{article.time}}</div>
      <div class="article-type"><i class="el-icon-document"></i>{{article.type}}</div>
      <div class="article-views"><i class="el-icon-view"></i>{{article.views}}</div>
    </div>
    <p class="article-intro">{{article.intro}}</p>
  </div>
</template>

<script>
export default {
  name: "ArticleIntroduceItem",
  props: {
    article: Object
  },
  data() {
    return {
      /*article: {
        id: '1',
        title: '标题',
        type: 'Javascript',
        time: '2022-03-01 20:14:52',
        intro: '内容简要...',
        views: 10
      }*/
    }
  }

}
</script>

<style scoped lang="less">
  .article-item-container {
    width: 100%;
    margin: 10px 0;
    box-sizing: border-box;
    border-bottom: 1px solid #B3C0D1;
    padding: 4px 0 10px 0;
    .article-title {
      font-size: 20px;
      line-height: 24px;
      margin: 8px 0;
      letter-spacing: 2px;
      .to-detail {
        text-decoration: none;
        color: #69C0FF;
      }
    }
    .article-info {
      display: flex;
      .article-time, .article-type, .article-views {
        font-size: 12px;
        line-height: 16px;
        margin: 4px 10px;
        color: #99a9bf;
        i {
          margin-right: 4px;
        }
      }
    }
    .article-intro {
      //width: 100%;
      font-size: 14px;
      line-height: 18px;
      margin: 4px 10px;
      color: #939393;

      display: -webkit-box;
      overflow: hidden;
      text-overflow: ellipsis;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
    }
  }
</style>
